// 第三方 js 库

// 组件库
import { login } from '@/store/actions/login'
import { NavBar, Form, Input, Button } from 'antd-mobile'
import { useDispatch } from 'react-redux'

// 自定义

// css
import styles from './Login.module.scss'

// 类型
type FormValues = {
  mobile: string
  code: string
}

export const Login = () => {
  // hooks
  const dispatch = useDispatch()

  // 页面状态

  // 事件
  const onFinish = (values: FormValues) => {
    console.log(values)
    dispatch(login(values))
  }

  return (
    <div className={styles.root}>
      {/* 顶层导航 */}
      <NavBar />
      {/* 表单区域 */}
      <div className="login-form">
        <h2 className="title">短信登录</h2>
        {/* 登录表单 */}
        <Form onFinish={onFinish}>
          <Form.Item
            className="login-item"
            name={'mobile'}
            validateTrigger={['onBlur']}
            rules={[
              { required: true, message: '请输入手机号' },
              {
                pattern: /^1[3-9]\d{9}$/,
                message: '手机号格式错误'
              }
            ]}
          >
            <Input placeholder="请输入手机号" autoComplete="off" maxLength={11} />
          </Form.Item>
          <Form.Item
            className="login-item"
            style={{ marginTop: 32 }}
            name={'code'}
            validateTrigger={['onBlur']}
            rules={[
              { required: true, message: '请输入验证码' },
              { len: 6, message: '验证码需要6位' }
            ]}
          >
            <Input placeholder="请输入验证码" maxLength={6} autoComplete="off" />
          </Form.Item>
          <Form.Item noStyle>
            <Button block color="primary" type="submit" className="login-submit">
              登 录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}
